/**
 * Created by xiezf on 2017/8/15.
 */

(function(root, factory) {
    'use strict'
    if (typeof define === 'function' && define.amd) {
        define(factory)
    } else if (typeof exports != 'undefined') {
        module.exports = factory();
    } else {
        root.yytPlaceholder = factory();
    }
}(this, function() {
    function getCssEffect(domObj) {
        if (domObj.currentStyle) {
            return domObj.currentStyle;
        } else if (window.getComputedStyle) {
            return document.defaultView.getComputedStyle(domObj);
        } else {
            return null
        }
    };

    function addHandler(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    };

    function getCharCode(e) {
        if (typeof e.charCode === "number") {
            return e.charCode;
        } else {
            return e.keyCode;
        }
    };

    function getEvent(event) {
        return event ? event : window.event;
    };

    function getTarget(event) {
        return event.target || event.srcElement
    };
    var yytPlaceholder = {
        init: function() {
            if (!('placeholder' in document.createElement('input'))) {
                var hasPlaceholder = document.querySelectorAll("input[placeholder]");
                if (hasPlaceholder.length > 0) {
                    var holders = new Array;
                    for (var i = 0; i < hasPlaceholder.length; i++) {
                        var span = document.createElement('span');
                        var input = hasPlaceholder[i];
                        span.height = input.clientHeight + 'px';
                        span.width = input.clientWidth + 'px';
                        span.innerHTML = input.getAttribute('placeholder');
                        if (input === input.parentNode.lastChild) {
                            input.parentNode.appendChild(span);
                        } else {
                            input.parentNode.insertBefore(span, input.nextSibling);
                        }
                        var cssStyle = getCssEffect(input);
                        span.style.color = "#999";
                        span.style.fontSize = cssStyle.fontSize;
                        span.style.textIndent = cssStyle.textIndent;
                        span.style.lineHeight = input.clientHeight + 'px';
                        span.style.textAlign = cssStyle.textAlign;
                        span.style.paddingLeft = cssStyle.borderLeftWidth;
                        span.style.paddingTop = cssStyle.borderTopWidth;
                        span.style.paddingRight = cssStyle.borderRightWidth;
                        span.style.paddingBottom = cssStyle.borderBottomWidth;
                        span.style.position = "absolute";
                        span.style.top = input.offsetTop;
                        span.style.left = input.offsetLeft + 50 + "px";
                        span.style.float = 'left';
                        holders[i] = span;
                    }
                    var togglePlaceholder = function(event) {
                        event = getEvent(event);
                        var target = getTarget(event);

                        for (var i in hasPlaceholder) {
                            if (target === hasPlaceholder[i]) {
                                if (hasPlaceholder[i].value != '') {
                                    holders[i].style.display = 'none';
                                } else if (/[a-zA-Z0-9`~!@#\$%\^&\*\(\)_+-=\[\]\{\};:'"\|\\,.\/\?<>]/.test(String.fromCharCode(getCharCode(event)))) {

                                    holders[i].style.display = 'none';
                                } else {
                                    holders[i].style.display = 'block';
                                }
                            }
                        }
                    };
                    addHandler(document, 'keydown', togglePlaceholder);
                    addHandler(document, 'keyup', function(event) {
                        event = getEvent(event);
                        var target = getTarget(event);
                        for (var i in hasPlaceholder) {
                            if (target === hasPlaceholder[i]) {
                                if (hasPlaceholder[i].value != '') {
                                    holders[i].style.display = 'none';
                                } else {
                                    holders[i].style.display = 'block';
                                }
                            }
                        };
                    })
                };
            };
        },
    };
    return yytPlaceholder;
}));